<template>
	<view v-if="show" class="wrap-total" :style="{width: windowsW, height: windowsH}" @click.stop="onClose">
		<view class="wrap-bottom" :style="{paddingBottom: (distanceBottom > 30 ? distanceBottom : 30), backgroundColor: bgColor}" @click.stop="onStop($event)">
			<slot />
				
			<close :type="closeType" @onClose="onClose" />
		</view>
	</view>
</template>

<script>
	import close from "@/components/close/close.vue"; //关闭
	
	export default {
		components: {
			close,
		},
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			/**
			 * 展示类型
			 * 1-更多 2-打赏记录 3-举报
			 * 4-用户信息 5-美颜 6-申请连麦列表
			 * 7-邀请连麦列表 8-礼物页面
			 * 9-在线人数 10-商品列表
			 * 11-钱包
			 */
			showType: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				windowsW: uni.getSystemInfoSync()["windowWidth"],
				windowsH: uni.getSystemInfoSync()["windowHeight"],
				distanceBottom: uni.getSystemInfoSync()["safeAreaInsets"].bottom,
				
				bgColor: "#1A191E", //背景颜色
				closeType: "0", //关闭类型
			}
		},
		watch: {
			showType: {
				handler() {
					let typeArray = [3, 6, 7, 9, 10, 11]
					if (typeArray.indexOf(this.showType) == -1) {
						this.bgColor = "#1A191E"
						this.closeType = "0"
					} else {
						this.bgColor = "#FFFFFF"
						this.closeType = "1"
					}
				}
			}
		},
		/**
		 * 方法
		 */
		methods: {
			/**
			 */
			onStop(e) {
				e.stopPropagation()
			},
			/**
			 * 关闭
			 */
			onClose() {
				this.$emit("update:show", false)
			},
		},
	}
</script>

<style scoped>
	.wrap-total {
		position: fixed;
		left: 0;
		top: 0;
		background-color: transparent;
	}
	.wrap-bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 750rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding-top: 40rpx;
	}
</style>